<template>
        <div  class="bigBox">
            <div class="box_chart">
                <div class="info">
                   <span> 近一周内总共登录{{total.login}}人，访问{{total.visit}}次</span>
                   <ul>
                       <li><span>登录量/人</span></li>
                       <li><span>访问量/次</span></li>
                   </ul>
                </div>
                 <ul class="rectangle">
                     <li v-for="(item,index) in histogram" class="rectangle_li">
                         <span class="fig" :style="{height:item.login+'px'} ">
                             <span class="sum">{{item.login_ < 10000 ? item.login_ : (item.login_/10000).toFixed(0)+'万'}}</span>
                         </span>
                         <span class="fig" :style="{height:item.visit+'px'} ">
                              <span class="sum">{{item.visit_ < 10000 ? item.visit_ : (item.visit_/10000).toFixed(0)+'万'}}</span>
                         </span>
                     </li>
                 </ul>
                    <ul class="dateTime">
                        <li v-for="(item,index) in weekTime">{{dayjs(item).format('MM-DD')}} 星期{{index+1}}</li>
                    </ul>
            </div>
        </div>
</template>

<script>
import dayjs from "dayjs";
import api from "@/api";

export default {
    name: "ColumnChart",
    computed: {
        dayjs() {
            return dayjs
        }
    },
    data(){
      return{
          histogram:[{
              login:"",
              login_:"",
              visit_:"",
              visit:"",
          }],
          columnChart:[{login:"",visit:""}],
          weekTime:[],
          total:{
              login:0,
              visit:0,
          }
      }
    },
    mounted() {
       api.changelogServer().then((res)=>{
          if(res.data.data){
              this.columnChart = res.data.data
              this.statistics();
          }
       })

        this.weekTime = this.getTime();
    },
    methods:{
        statistics(){
            for(let i =0;i<7;i++){
                this.total.login+=this.columnChart[6-i].login;
                this.total.visit+=this.columnChart[6-i].visit;
            }
            let rectangleLi = document.querySelector(".rectangle_li")
            let height = rectangleLi.offsetHeight*(0.9)-20;
            let unit_l = (height/ this.total.login)
            let unit_v = (height/ this.total.visit)
            this.histogram.length = 0;
            for(let i =0;i<7;i++){
                let login =  ((this.columnChart[6-i].login)*unit_l)
                let visit = ((this.columnChart[6-i].visit)*unit_v)
                this.histogram.push({login:login,login_:this.columnChart[6-i].login,visit:visit,visit_:this.columnChart[6-i].visit})
            }

        },
        getTime(){
            let date = new Date();
            let now = date.getDay();
            let weekTime = [dayjs().format('YYYY-MM-DD')];
                for(let i =1;i<7;i++){
                    let time = dayjs().subtract(i, 'day').format('YYYY-MM-DD')
                    weekTime.unshift(time)
                }

            return weekTime;
        }
    },

}
</script>

<style scoped>
.bigBox{
    width: 100%;
    height: 100%;
    padding-top: 3px;
}
.box_chart{
    position: relative;
    width: 100%;
    min-width: 700px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.info{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 10px;
}
.info ul{
    display: flex;
    list-style: none;
    font-size: 14px;
}
.info ul li:nth-child(1):before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 1px;
    margin:0 5px ;
    background: #3586f1;
}
.info ul li:nth-child(2):before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 1px;
    margin:0 5px;
    background: #94f375;
}
.rectangle{
    width: 100%;
    height: 100%;
    list-style: none;
    display: flex;
    padding-left: 0;
    justify-content: space-around;
    border-left: 2px solid #8f8c8c;
    border-bottom: 2px solid #8f8c8c;
}
.dateTime{
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: space-around;
}
.dateTime li{
    font-size: 14px;
}
.rectangle li{
    min-width: 90px;
    height: 100%;
    display: flex;
    align-items: flex-end;

}
li .fig{
    position: relative;
    flex: 1;
    max-height: 90%;
    min-height: 2px;
    background:  #3586f1;
    transition: all 1s;
    animation: fig_ .3s linear 0s 1 forwards;
}
@keyframes fig_ {
    0%{
       transform: scaleX(0);
    }
    100%{
        transform: scaleX(1);
    }
}
li .fig:nth-child(2){
    background: #94f375;
}
li .fig:nth-child(3){
    background: #35c5f1;
}
.sum{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    font-size: 12px;
    font-weight: bold;
    color: #8f8c8c;
}
</style>